<template>
  <div class="nav-tab">
    <div v-for="(item, index) in routerList" :key="index" :style="{ borderBottom: routerIndex == index ? '1px solid #409eff' : '' }">
      <span @click="toSkip(item)">{{ item.meta.title }}</span>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        routerList: [],
        routerIndex: '',
      }
    },
    created() {
      this.$store.getters['routes/routes'].forEach((row) => {
        if (row.path === '/') {
          this.routerList = JSON.parse(JSON.stringify(row.children))
        }
      })
      if (this.routerList && this.routerList[0].path == '/1301') {
        this.routerList.splice(0, 1)
      }
      this.routerIndex = this.routerList.findIndex((el) => el.path == this.$route.path)
    },
    methods: {
      toSkip(item) {
        this.routerIndex = this.routerList.findIndex((el) => el.path == this.$route.path)
        this.$router.push(item.path)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .nav-tab {
    display: flex;
    // flex-wrap: wrap;
    // background-color: #f0f2f5;
    // padding: 15px 0;
    box-sizing: border-box;
    // flex-wrap: wrap;
    width: 100%;

    & > div {
      width: calc(100% / 11);
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 600;
      // border-bottom: 1px solid #409eff;
      // margin: 0 5px;
      & > span {
        cursor: pointer;
      }
    }
  }
</style>
